<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link href="/Public/css/register.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="/Public/css/global.css" />
<!--   <script src="/Public/js/time.js"></script> -->
  <script src="/Public/js/jquery-2.1.1.min.js"></script>
  <script src="/Public/js/amazeui.min.js"></script>
  <script src="/Public/layer/layer.js"></script>
</head>
<body style="background:#fff;">
<div>
  <link href="/Public/css/register.css" rel="stylesheet" type="text/css" />
  <form id="formRegister" action="/index.php/Home/index/reg" method="post">
    <!--<form id="formRegister" action="/index.php/Home/index/reg/agent_id/48" method="post">-->
    <header id="title">
      <div class="back"><a  href="javascript:void(0)" onclick="javascript:history.go(-1);return false;" ></a>  </div>
      个人注册</header>
    <div style="height:2.8em;"></div>
    <section id="register">
      <div> <span> <img src="/Public/images/icon_user.png" width="24" height="24" alt="用户名"></span>
        <input id="register_name"  name="register_name" type="text" placeholder="用户名">
      </div>
      <div> <span> <img src="/Public/images/icon_phone.png" width="24" height="24" alt="手机图标"></span>
        <input id="txt_UserName"  name="txt_UserName" type="text" placeholder="手机号码">
      </div>
      <div> <span> <img src="/Public/images/icon_password.png" width="24" height="24" alt="密码图标"></span>
        <input id="txt_Pwd"  name="txt_Pwd" type="password" placeholder="密码（6～16个字符）">
      </div>
      <div> <span> <img src="/Public/images/icon_password.png" width="24" height="24" alt="密码图标"></span>
        <input id="txt_PwdTwo"  name="txt_PwdTwo" type="password" placeholder="再次输入密码">
      </div>
      <div> <span> <img src="/Public/images/icon_email.png" width="24" height="24" alt="手机验证码"></span>
        <input id="txt_UserName2"  name="txt_UserName2" type="text" placeholder="手机验证码"><a id="verify" onclick="verify()">获取验证码</a><!--<a href="#" class="fasong">(60)重新发送</a>-->
        <input type="hidden" id="verify_val" value="" />
      </div>
      <div> <span> <img src="/Public/images/icon_user.png" width="24" height="24" alt="手机图标"></span>
        <if condition="isset($tel['tel'])">
          <input id="txt_Mobile" name="txt_Mobile" type="text" value="{$tel['tel']}" readonly="readonly" >
          <else/>
          <input id="txt_Mobile1" name="txt_Mobile" type="text" placeholder="（非必填）邀请人手机号">
        </if>
      </div>
      <input type="hidden" id="hid_Action" name="hid_Action" value="add" />
      <input type="checkbox" name="agreement" id="agreement" onclick="agree();">我已阅读并同意<a href="#" style="color: blue;" onclick='return xieyi()'>注册协议</a></input>
      <input type="submit" onclick="return checkform()" class="btn" id="btn" value="立即注册">
      <p> 已有账号？<a href="/index.php/Home/login/login">马上登陆</a></p>
    </section>
  </form>
</div>
</body>
</html>
<script type="text/javascript">

      //表单验证
      function checkform()
      {  //alert(123);
          var register_name=document.getElementById("register_name").value
          var mobile = document.getElementById("txt_UserName").value;
          var password = document.getElementById("txt_Pwd").value;
          var pwdTwo = document.getElementById("txt_PwdTwo").value;
          var verify = document.getElementById("txt_UserName2").value;
          var code=document.getElementById("verify_val").value;
          //layer.alert(code);
          if(register_name=="")
          {
              layer.alert("用户名不能为空！");
              document.getElementById("register_name").focus();
              return false;
          }
          if(mobile=="")
          {
              layer.alert("手机号不能为空，请输入手机号！");
              document.getElementById("txt_UserName").focus();
              return false;
          }
          if(!(/^1[34578]\d{9}$/.test(mobile)))
          {
              layer.alert("请输入有效的手机号！");
              document.getElementById("txt_UserName").focus();
              return false;
          }
          if(password.length<6 ||password.length>16)
          {
              layer.alert('请输入6~16个字符！');
              document.getElementById("txt_Pwd").focus();
              return false;
          }
          if(pwdTwo!==password)
          {
              layer.alert('两次密码不一致！');
              document.getElementById("txt_PwdTwo").focus();
              return false;
          }
          if(verify=="")
           {
               layer.alert('验证码不能为空！');
               document.getElementById("txt_UserName2").focus();
               return false;
           }
          if(verify!==code)
           {
             layer.alert('验证码有误');
               document.getElementById("txt_UserName2").focus();
               return false;
           }
          if(document.getElementById('agreement').checked==false){
              layer.alert('必须接受用户注册协议');
              return false;
          }        
          $("#formRegister").submit();
        }

      function xieyi(){
          var index = layer.open({
            title:'注册协议',
            type: 2,
            content: 'xieyi.html',
            area: ['320px', '195px'],
            maxmin: true
            
          }); 
          layer.full(index); 
      }

      function agree(){
        if(document.getElementById('agreement').checked){
            $('#btn').attr("disabled",false);
          }else{
            $('#btn').attr("disabled",true);
          }     
      }

      //单击时执行
      function verify() {
          var mobile = document.getElementById("txt_UserName").value;
          if(mobile=="")
          {
              layer.alert("手机号不能为空，请输入手机号！");
              document.getElementById("txt_UserName").focus();
              return false;
          }else if(!(/^1[34578]\d{9}$/.test(mobile)))
          {
              layer.alert("请输入有效的手机号！");
              document.getElementById("txt_UserName").focus();
              return false;
          }
          //验证码倒计时
          var InterValObj; //timer变量，控制时间
          var count = 60; //间隔函数，1秒执行
          var curCount;//当前剩余秒数
          var mobile = document.getElementById("txt_UserName").value;
          $.ajax({
              url: "/index.php/Home/index/verify",
              type: "post",
              data: {'mobile': mobile},
              datatype: "json",
              async :false, 
              success: function (msg) {
                console.log(msg);
                var num=JSON.stringify(msg);
                layer.alert(num.slice(10));
                $("#verify_val").val(num.slice(3,9));
              },
          });


          curCount = count;
          // 设置button效果，开始计时
          document.getElementById("verify").setAttribute("onclick", "");//设置按钮为禁用状态
          document.getElementById("verify").text = "请在" + curCount + "秒后再次获取";//更改按钮文字
          InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器
          //timer处理函数

          function SetRemainTime() {
              if (curCount == 0) {
                  window.clearInterval(InterValObj);// 停止计时器
                  document.getElementById("verify").setAttribute("onclick","verify()");//移除禁用状态改为可用
                  document.getElementById("verify").text = "重新发送验证码";
                  $("#verify").disable = "";

              } else {
                  curCount--;
                  document.getElementById("verify").text = "请在" + curCount + "秒后再次获取";
              }
          }
      }

      $(function(){
          //手机号验证
          $("#txt_UserName").blur(function() {
              var mobile = document.getElementById("txt_UserName").value;
              //手机号是否存在
              $.ajax({
                  type:"post",
                  url:"/index.php/Home/index/change",
                  data:{'mobile':mobile},
                  dataType:"json",
                  success:function(msg){
                      if(msg==1)
                      {
                          layer.alert("手机号已注册过，请换一个");
                      }
                  }
              });
          });

          $("#txt_Mobile1").blur(function() {
              var txt_Mobile1 = document.getElementById("txt_Mobile1").value;
              //alert(123);
              //手机号是否存在
              $.ajax({
                  type:"post",
                  url:"/index.php/Home/index/change1",
                  data:{'txt_Mobile1':txt_Mobile1},
                  dataType:"json",
                  success:function(msg){
                    //console.log(msg);
                      if(msg==3)
                      {
                          layer.alert("推荐人手机号填写有误!");
                          //document.getElementById("txt_Mobile1").value='';
                      }
                  }
              });
          });
      });

  </script>